<template>
  <div class="w100 cc-display">
    <div class="login bc1">
      <div class="title h160p w100 cc-display">
        <img class="" src="../assets/logo.png" />
      </div>
      <div class="username h80p w100 cc-display">
        <div class="icon cc-display"></div>
        <input class="input pbm0" type="text" v-model="state.username" />
      </div>
      <div class="password h80p w100 cc-display">
        <div class="icon cc-display"></div>
        <input class="input pbm0" type="password" v-model="state.password" />
      </div>
      <div class="cc-display w100">
        <button
          class="button h40p w80p bc2 br20p cc-display"
          @click="fnLoginSubmit"
        >
          <span class="white">登&nbsp;&nbsp;&nbsp;录</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive } from "vue";
import { get_, post_ } from "../http/api.js";
import { localStore, localData } from "/@/http/store.js";
import { useRouter } from "vue-router";

export default {
  // 父组件传值
  props: {
    msg: String,
  },
  // 回传父组件
  emits: ["frompage-info"],
  // 钩子
  setup(props, { emit }) {
    // 路由
    const { push } = useRouter();
    // 双向数据绑定
    const state = reactive({
      username: "",
      password: "",
      verifycode: "",
    });
    // 登录按钮
    const fnLoginSubmit = () => {
      post_("submit", {
        userNo: state.username,
        password: state.password,
        verifyCode: state.verifycode,
      }).then((res) => {
        // 用户信息写入全局变量
        oGlobalVar.userInfo = res;
        // 用户信息本地化存储
        localStore("user", res); //console.log(localData("user"));
        // 回传父组件，刷新右上角登录信息
        emit("frompage-info", {
          msg: res.userName,
          code: "success",
          from: "Login",
        });
        push("/");
      });
      // get_("api/question");
      // get_("api/pub/questionLib");
    };
    // 输出到模板
    return {
      state,
      fnLoginSubmit,
    };
  },
};
</script>

<style scoped>
.login {
  margin-top: 80px;
  width: 600px;
  height: 400px;
}

.title img {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-color: #fff;
}

.username .icon:before {
  content: "\21AF";
}

.password .icon:before {
  content: "\2766";
}

.icon {
  width: 50px;
  height: 40px;
  color: #888;
  background-color: #fff;
  font-size: 24px;
}

.input {
  width: 65%;
  height: 40px;
  outline: none;
}

.button {
  border: none;
  cursor: pointer;
  outline: none;
}
.button:hover {
  background-color: rgb(34, 121, 190);
}
</style>
